<template>
  <div class="w-full">
    <div class="flex" v-if="isUpload">
      <Uploader
        ref="uploaderRef"
        :is-drop="false"
        :isShowList="false"
        :options="{ singleFile: true }"
        :maxFileSize="props.maxFileSize"
        :attrs="{
          accept: props.attrs,
        }"
        @file-added="onFileAdded"
        @save-file="saveFile"
      />
      <!-- <span>
        （允许上传文件类型：{{ props.attrs.join(",") }} 最大允许{{
          props.maxFileSize
        }}M）
      </span> -->
    </div>
    <div
      :class="[
        'flex',
        !alwaysHasBorder && !isUpload ? 'noBorder' : 'hasBorder',
      ]"
      v-if="fileForm[`${props.fileKey.name}`]"
    >
      <div class="files grow">{{ fileForm[`${props.fileKey.name}`] }}</div>
      <div class="buttons-group shrink-0">
        <span
          v-if="props.data[`${props.fileKey.preview}`]"
          @click="
            handlePreview(
              fileForm[`${props.fileKey.preview}`]
                ? fileForm[`${props.fileKey.preview}`]
                : fileForm[`${props.fileKey.download}`]
            )
          "
        >
          预览
        </span>
        <span
          class="ml-3"
          v-if="props.data[`${props.fileKey.download}`]"
          @click="
            handleDownload(
              fileForm[`${props.fileKey.download}`]
                ? fileForm[`${props.fileKey.download}`]
                : fileForm[`${props.fileKey.preview}`],
              fileForm[`${props.fileKey.name}`]
            )
          "
        >
          下载
        </span>
        <span
          @click="handleRemove(fileForm[`${props.fileKey.name}`])"
          class="ml-3 danger"
          v-if="isUpload"
        >
          删除
        </span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useVModel } from "@vueuse/core";
import { handlePreview, handleDownload } from "@/utils/uploader.js";
interface InterfaceProps {
  alwaysHasBorder?: boolean;
  isUpload?: boolean;
  maxFileSize?: number;
  showSize?: boolean;
  attrs?: string[];
  data: any;
  fileKey: {
    name: string;
    download: string;
    preview?: string;
  };
}
const props = withDefaults(defineProps<InterfaceProps>(), {
  alwaysHasBorder: false,
  isUpload: false,
  maxFileSize: 30,
  showSize: true,
  attrs: [".png", ".jpg", ".jpeg", ".doc", ".docx", ".pdf"],
  data: {},
  fileKey: () => {
    return {
      name: "",
      preview: "",
      download: "",
    };
  },
});

const emit = defineEmits(["update:data", "add-file", "save-file"]);
const fileForm = useVModel(props, "data", emit);
// 添加文件
const onFileAdded = (file) => {
  emit("add-file", file);
};
const saveFile = (file) => {
  fileForm.value[`${props.fileKey.name}`] = file.name;
  fileForm.value[`${props.fileKey.preview}`] = file.wordToPdf
    ? file?.previewUrl
    : "";
  fileForm.value[`${props.fileKey.download}`] = file?.downloadUrl ?? "";
  emit("save-file", file);
};

const handleRemove = () => {
  Object.values(props.fileKey).forEach((item) => {
    fileForm.value[item] = "";
  });
};
</script>

<style lang="scss" scoped>
.files {
  height: 32px;
  padding: 0 11px;
  line-height: 32px;
  color: var(--el-disabled-text-color);
  background-color: var(--el-disabled-bg-color);
}

.buttons-group {
  height: 32px;
  padding: 0 20px;
  font-weight: 500;
  line-height: 32px;
  color: var(--el-color-primary);
  cursor: pointer;
  background-color: var(--el-fill-color-light);
}

.danger {
  color: #f56c6c;
}

.hasBorder {
  .files {
    border: 1px solid #d4d5d8;
    border-radius: 4px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .buttons-group {
    border: 1px solid #d4d5d8;
    border-left: 0;
    border-radius: 4px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

.noBorder {
  .files,
  .buttons-group {
    background-color: #fff;
    border: 0;
  }

  .files {
    color: #606266;
  }
}
</style>
